<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/WEB-INF/include/head.jsp" %>
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <%@ include file="/WEB-INF/include/menu.jsp" %>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <div class="header-section">

            <!--toggle button start-->
            <a class="toggle-btn"><i class="fa fa-bars"></i></a>
            <!--toggle button end-->

            <!--notification menu start -->
            <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="badge">5</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-head pull-right">
                            <h5 class="title">You have 5 Mails </h5>
                            <ul class="dropdown-list normal-list">
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="${ctxStatic}images/photos/user5.png"
                                                                 alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jim Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="new"><a href="">Read All Mails</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img src="${ctxStatic}images/photos/user-avatar.png" alt=""/>
                            John Doe
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">

                            <li><a href="#"><i class="fa fa-cog"></i> 修改密码 </a></li>
                            <li><a href="#"><i class="fa fa-sign-out"></i> 退出</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->

        <div class="page-heading">
            <h3>
                查看下发公告
            </h3>

        </div>

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="mail-box">
                <section class="mail-box-info">
                    <div class="col-xs-3" style="width:320px">
                        <label style="display: inline-block;padding: 6px 12px;height: 34px;float:left">公告编号:</label>
                        <input type="text" id="code" style="width:200px;"
                               class="form-control pull-left" placeholder="公告编号"/>
                    </div>
                    <div class="col-xs-3" style="width:320px">
                        <label style="display: inline-block;padding: 6px 12px;height: 34px;float:left">公告标题:</label>
                        <input type="text" id="title" style="width:200px;" class="form-control pull-left"
                               placeholder="公告标题"/>
                    </div>
                    <div class="col-xs-3 pull-right">
                        <button id="search" class="btn btn-primary pull-right">搜索</button>
                    </div>
                    <section class="mail-list">
                        <%--这里面显示从数据库查询出来的数据--%>


                    </section>
                    <div id="demo3">
                          <!--这里显示分页的内容-->
                    </div>
                </section>
            </div>

        </div>

        <%@ include file="/WEB-INF/include/footer.jsp" %>
    </div>
</section>

<%@ include file="/WEB-INF/include/js.jsp" %>


<script type="html" id="template">
    {{#list}}
        <ul class="list-group ">
          <li class="list-group-item">
            <a  href="${ctx}/admin/notify/find?id={{id}}">
                <small class="pull-right text-muted">{{createTimeStr}}</small>
                <span>{{title}}</span>
            </a>
            <a href="${ctx}/admin/notify/findById?id={{id}}" style="float: right;margin-right: 10px">
               <span class="label label-sm btn-success ">修改公告</span>
            </a>
			<a  onclick="send({{id}})" style="float: right;margin-right: 10px" href="javascript:;">
			    <span class="label label-sm btn-success ">下发公告</span>
            </a>
          </li>
        </ul>
    {{/list}}


</script>
<script>

    function getData(laypage, pageNum, pageSize){
        utils.post({
            url: "${ctx}/admin/notify/findAll",
            data: {
                pageNum: pageNum,
                pageSize: pageSize,
                status: 0
            },
            success: function (data) {
                if (data.code == 200) {
                    var notifyList = data.data;
                    $.each(notifyList.list, function (index, obj) {
                        $.extend(obj, {
                            statusClass: function () {
                                if (this.status == "0") {
                                    return 'btn-danger';
                                }
                                if (this.status == "1") {
                                    return 'btn-success';
                                }
                            },
                            createTimeStr: function () {
                                var date = new Date(this.createTime);
                                return date.format("yyyy-MM-dd");
                            }
                        });
                    })

                    var template = $('#template').html();
                    var contentHtml = Mustache.render(template, notifyList);
                    $('.mail-list').html(contentHtml);

                    //自定义首页、尾页、上一页、下一页文本
                    laypage.render({
                        elem: 'demo3',
                        curr: pageNum,
                        count:data.data.total,
                        limit:pageSize,
                        theme: '#FF5722',
                        first: '首页',
                        last: '尾页',
                        jump: function(obj, first){
                            if(!first){
                                getData(laypage, obj.curr, obj.limit);
                            }
                        }
                    });
                }
            }
        })
    }

    //点击下发执行的函数
    function send(id) {
        layer.confirm("确认要下发吗？", {icon: 3,title: "提示信息！" }, function (index) {
            layer.close(index);
            utils.post({
                url: "${ctx}/admin/notify/publish",
                data: {
                    id: id
                },
                success: function (data) {
                    if (data.code == 200) {
                        layer.alert('公告下发成功', {icon: 6,title:"提示信息！"}, function(index){
                            window.location.reload();
                            layer.close(index);
                        });
                    } else {
                        layer.alert('公告下发失败', {
                            icon: 5,
                            title: "提示信息"
                        });
                    }
                }
            })
        });
    }

    layui.use('laypage', function() {
        var laypage = layui.laypage;
        getData(laypage, 1, 4);
        //搜索按钮
        $("#search").click(function () {
            var code=$("#code").val();
            var title=$("#title").val();
            if(code=="" && title==""){
                layer.alert('请输入搜索的内容', {
                    icon: 6,
                    title: "提示信息"
                });
            }else{
                search(laypage,1, 4);
            }
        });
    });


    //条伯件搜索
    function search(laypage,pageNum, pageSize) {
        var template = $('#template').html();
        utils.post({
            url:"${ctx}/admin/notify/search",
            data:{
                code:$("#code").val(),
                title:$("#title").val(),
                pageNum:pageNum,
                pageSize:pageSize
            },
            success:function (data) {
                if (data.code == 200) {
                    var notifyList = data.data;
                    $.each(notifyList.list, function (index, obj) {
                        $.extend(obj, {
                            statusClass: function () {
                                if (this.status == "0") {
                                    return 'btn-danger';
                                }
                                if (this.status == "1") {
                                    return 'btn-success';
                                }
                            },
                            createTimeStr: function () {
                                var date = new Date(this.createTime);
                                return date.format("yyyy-MM-dd");
                            }
                        });
                    })


                    var contentHtml = Mustache.render(template, notifyList);
                    $('.mail-list').html(contentHtml);

                    laypage.render({
                        elem: 'demo3',
                        curr: pageNum,
                        count:data.data.total,
                        limit:pageSize,
                        theme: '#FF5722',
                        first: '首页',
                        last: '尾页',
                        jump: function(obj, first){
                            if(!first){
                                search(laypage,obj.curr, obj.limit);
                            }
                        }
                    });
                }else{
                    layer.alert('暂无数据', {
                        icon: 5,
                        title: "提示信息"
                    });
                }
            }
        })
    }














</script>
</body>
</html>
